<template>
  <div class='home-page'>
    <Toptab :checkedNum="1"></Toptab>
    <div class="main">
      <div class="top">
        <broadcast></broadcast>
      </div>
      <!-- 我的用户统计信息 -->
      <myStatistics></myStatistics>
      <!-- 查看我的好友列表总分前五名 -->
      <friendRank></friendRank>
      <!-- 查看当前词表的词力排名前五 -->
      <friendFans></friendFans>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import Toptab from '@/components/Toptab.vue'
// 播报组件
import broadcast from './components/broadcast.vue'
// 引入统计用户成就组件
import myStatistics from './components/my-Statistics.vue'
// 引入好友排行组件
import friendRank from './components/friend-ranking.vue'
// 引入本词书排名top5
import friendFans from './components/friend-fans.vue'
// 头像组件
// import avatar from '@/components/library/avatar.vue'
export default {
  name: 'my-page',
  components: {
    Toptab,
    broadcast,
    friendRank,
    friendFans,
    myStatistics
    // avatar
  },
  data () {
    return {
      profile: null
    }
  },
  created () {
    this.profile = store.state.user.profile
  }
}
</script>

<style scoped lang='less'>
.home-page{
  height: 1500px;
}
.main{
  background: #fffdfd;
  width: 800px;
  margin:0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top{
    width: 800px;
    padding-left: 20px;
    padding-top: 20px;
    height: 100px;
  }
}
</style>
